//JavaScript 到底是什么？
//1.JavaScript 是一门为网站添加交互性的强有力的编程语言

//“Hello World!”示例
/**1.创建一个名为scripts的新目录 然后在scripts目录中创建一个名为main.js的新文件并保存
 * 2.打开index.html文件 在结束标签 </body> 前添加下列代码：
 * <script src="scripts/main.js"></script>
 *
 * 3.与 CSS 的 <link> 元素的功能类似 它将JavaScript引入以作用于html( 以及css和页面上的任何其他内容 )
 * 4.将下列代码添加到 scripts 的 main.js 文件中：
 * const myHeading = document.querySelector("h1");
 * myHeading.textContent = "Hello world!";
 * 确认保存了 html 和 JavaScript 文件  然后在浏览器中打开 index.html
 */


//JavaScript 速成课程
//《变量》
//变量是存储值的容器 要声明变量 先输入 let 关键字 然后输入变量名：
let myVariable;
//行尾的分号表示语句结束 仅当你需要在单行内分隔多条语句时 分号才是必须的
//JavaScript 对大小写敏感 这意味着 myVariable 和 myvariable 是不同的 如果代码中有问题 检查一下大小写

//注意变量可以存储不同数据类型的值：
/**1.字符串： 就是文本序列 用单引号或双引号括起来的值就是字符串：let a = '鲍勃';
 * 或者let a = "鲍勃";
 *2.数字： 周围没有引号：let b = 10;
 * 3.布尔值：真/假值 单词 true/false 是不需要引号的特殊关键字： let c = true; let c1 = false;
 * 4.数组： 让你在单一引用中存储多个值的结构：let d = [1,'鲍勃','斯蒂夫',10];
 * 可以这样引用数组：d[0]  d[1]取下标
 * 5.对象： 可以是任何内容 JavaScript 里的一切都是对象 对象能在变量中存储:
 * let myVariable = document.querySelector('h1'); 上面的示例都是
 */

//《注释》
/**多
 * 行
 * 注
 * 释
 */
//单行注释

//《运算符》
/**
 * 1.加： 将两个数字相加或拼接两个字符串 符号“+” 示例：6 + 9;  'Hello ' + 'world!';
 *
 * 2.减、乘、除： 这些运算符的作用与基础算术一致 符号“-、*、/”
 * 示例：9 - 3;
 * 8 * 2; //乘法在 JS 中是一个星号
 * 9 / 3;
 *
 * 3.赋值： 为变量赋值 符号：= 示例：let myVariable = '鲍勃';
 *
 * 4.严格相等： 测试两个值是否相等以及是否是相同的数据类型  并返回一个 true/false（布尔）结果 符号：===
 * 示例：let myVariable = 3;
 * myVariable === 4;
 *
 * 5.非、不等于： 返回和先前逻辑上相反的值 非将 true 变为 false 等等 当它和相等运算符一起使用时 否定运算符测试两个值是否不相等
 * 符号：!、!== 示例：对于“非” 基本表达式是 true 但结果返回的是 false 因为我们否定了这个值：
 *
 * let myVariable = 3;
 * !(myVariable === 3);
 *
 * “不等于”用不同的语法得出了基本上一样的结果 这里测试“myVariable 不等于 3” 返回 false 因为 myVariable 等于 3：
 *
 * let myVariable = 3;
 * myVariable !== 3;
 */

//条件语句
// 条件语句是用来测试表达式的真假的代码结构 一个常用的条件语句是 if...else 语句
// 例如：let iceCream = "chocolate";
// if (iceCream === "chocolate") {
//   alert("我最喜欢巧克力冰淇淋了！");
// } else {
//   alert("但是巧克力才是我的最爱");
// }
//if () 中的表达式是一个测试 用严格相等运算符来比较 iceCream 变量与 chocolate 字符串是否相等 如果返回 true 则运行第一个代码块 如果返回 false 则运行 else 关键字之后的第二个代码块

//《函数》
//函数是一种将你希望重复使用的功能封装起来的方式 你可以将一段代码定义为一个函数 当你在代码中调用该函数名时 它会执行 这是一种避免重复编写相同代码的好方式 你已经看到了一些函数的使用示例了
//如：
let myVariable = document.querySelector("h1");alert("你好！");
//document.querySelector 和 alert 是浏览器内置的函数
//如果你发现有个像变量名 但后面跟着小括号 () 的东西 它很可能是函数 函数通常接收参数：函数用来执行特定的任务 参数位于小括号内 多个参数之间用逗号分开
//比如 alert() 函数在浏览器窗口内弹出一个警告框 但还应为其提供一个字符串参数 告诉它警告框里要显示的内容

/**
 * 你也可以定义你自己的函数 在下面的例子中 我们创建了一个接收两个数字参数的函数 并对这两个参数做乘法：
 * function multiply(num1, num2) {
 *    let result = num1 * num2;
 *    return result;
 *  }
 *
 * 尝试在控制台中运行这个函数；然后多试几组参数 比如：
 * multiply(4, 7);
 * multiply(20, 20);
 * multiply(0.5, 3);
 *  return 语句告诉浏览器将 result 变量返回到函数外面 这一点很有必要 因为函数内定义的变量只能在函数内使用 这叫做变量的作用域
 */

//《事件》
/**
 * 事件处理器能为网页添加真正的交互 它们是监听浏览器活动的代码块 并在响应中运行代码
 * 最明显的例子就是处理点击事件 当你用鼠标点击时 浏览器会触发该事件
 * 作为演示 在控制台中输入下面的代码 然后点击网页的任意位置
 *
 * document.querySelector("html").addEventListener("click", function () {
 *   alert("别戳我，我怕疼！");
 * });
 */
//完善示例网站
//《添加一个图像切换器》
/**当用户点击图片时进行切换
 * 1.选择一张你想在页面上展示的图片 理想情况下，这张图片的尺寸与之前添加的图片的尺寸尽可能相同
 * 2.将这张图片保存在 images 目录中
 * 3.将这张图片重命名为 firefox2.png
 * 4.将下列的 JavaScript 代码添加到 main.js 文件:
 * const myImage = document.querySelector("img");
 *
 * myImage.onclick = () => {
 *   const mySrc = myImage.getAttribute("src");
 *   if (mySrc === "images/firefox-icon.png") {
 *     myImage.setAttribute("src", "images/firefox2.png");
 *   } else {
 *     myImage.setAttribute("src", "images/firefox-icon.png");
 *   }
 * };
 */

